<template>
  <xtx-tab v-model="currentTab" :tabs="tabs">
    <component :ref="currentTab" :is="currentTab"></component>
  </xtx-tab>
</template>

<script>
import UserInfo from './user-info'
import UserInterest from './user-interest'
import UserSize from './user-size'
export default {
  data () {
    return {
      // 选项卡
      tabs: [
        { title: '基本信息', name: 'UserInfo' },
        { title: '兴趣分类', name: 'UserInterest' },
        { title: '我的尺码', name: 'UserSize' }
      ],
      // 当前组件
      currentTab: 'UserInfo'
    }
  },
  beforeRouteLeave (to, from, next) {
    if (this.$refs.UserInfo && this.$refs.UserInfo.infoHasUpdated()) {
      this.$confirm({ text: '个人信息有修改未保存，您确认离开吗？' }).then(valid => {
        next(valid)
      })
    } else {
      next()
    }
  },
  components: {
    UserInfo,
    UserInterest,
    UserSize
  }
}
</script>

<style scoped lang='less'></style>
